{#
  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}

{% from "macros-protocol.html" import picto, split with context %}
{% from "products/vpn/includes/macros.html" import vpn_nav_cta_refresh, vpn_conditional_cta_refresh with context %}

{% extends "products/vpn/base.html" %}

{# Issue 13019: Avoid duplicate content for English pages. #}
{%- block page_title_full -%}
  {%- if LANG == 'en-US' -%}
    Get Mozilla VPN  — Mozilla (US)
  {%- elif LANG == 'en-GB' -%}
    Get Mozilla VPN — Mozilla (UK)
  {%- else -%}
    {{ ftl('vpn-landing-title') }}
  {%- endif -%}
{%- endblock -%}

{% block page_title_suffix %}{% endblock %}

{% block page_desc %}{{ ftl('vpn-landing-desc', countries=available_countries) }}{% endblock %}

{% block body_id %}mozilla-vpn-landing{% endblock %}

{% set _utm_source = 'www.mozilla.org-vpn-product-page' %}
{% set _utm_campaign = 'vpn-product-page' %}
{% set _params = '?utm_source=' ~ _utm_source ~ '&utm_medium=referral&utm_campaign=' ~ _utm_campaign %}

{% block experiments %}
{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-split') }}
  {{ css_bundle('protocol-picto')}}
  {{ css_bundle('mozilla-vpn-common-refresh') }}
  {{ css_bundle('mozilla-vpn-landing-refresh') }}
{% endblock %}

{% block site_header %}
  {% with custom_nav_cta=vpn_nav_cta_refresh() %}
    {% include 'includes/protocol/navigation/navigation.html' %}
  {% endwith %}
{% endblock %}

{% block content %}
<main>
  {% call split(
    block_class='c-hero mzp-l-split-center-on-sm-md mzp-t-content-xl',
    image=resp_img(
      url='img/products/vpn/landing-refresh/vpn-hero-400.png',
      srcset={
        'img/products/vpn/landing-refresh/vpn-hero-400.png': '400w',
        'img/products/vpn/landing-refresh/vpn-hero-600.png': '600w',
        'img/products/vpn/landing-refresh/vpn-hero-800.png': '800w',
      },
      sizes={
        '(min-width: 1312px)': '400px',
        '(min-width: 768px)': '50vw',
        'default': '100vw'
      },
      optional_attributes={
        'height': '396',
        'width': '400',
        'class': 'mzp-c-split-media-asset',
      }
    ),
    media_class='mzp-l-split-h-center',
    media_after=True
  ) %}
    <h1>{{ ftl('vpn-landing-powerful-privacy-for-peace') }}</h1>

    {% if vpn_available %}
      <p class="c-main-cta">
        {% if mobile_sub_only %}
          <a class="mzp-c-button mzp-t-product mzp-t-xl" href="#pricing" data-cta-text="Get Mozilla VPN" data-cta-position="primary" data-testid="get-mozilla-vpn-hero-button">
            {{ ftl('vpn-shared-subscribe-link') }}
          </a>
        {% else %}
          {# Only mention 12-month subscription in the CTA if visitor can purchase through subplat / FxA. #}
          <a class="mzp-c-button mzp-t-product mzp-t-xl" href="#pricing" data-cta-text="Save on Mozilla VPN" data-cta-position="primary" data-testid="get-mozilla-vpn-hero-button">
            {{ vpn_saving(country_code=country_code, lang=LANG, ftl_string='vpn-shared-save-percent-on') }}
          </a>
          <small>
            {{ ftl('vpn-shared-with-an-annual-subscription') }}
          </small>
        {% endif %}
      </p>

    {% else %}
      <a class="mzp-c-button mzp-t-product mzp-t-xl" href="{{ url('products.vpn.invite') }}" data-cta-text="Join the VPN Waitlist" data-cta-position="primary" data-testid="join-waitlist-hero-button">
        {{ ftl('vpn-shared-waitlist-link') }}
      </a>
    {% endif %}
  {% endcall %}

  <aside class="c-powered-by mzp-l-content mzp-t-content-nospace">
    <p>{{ ftl('vpn-landing-powered-by-mozilla-fighting-for') }}</p>
  </aside>

  {% call split(
    block_class='c-what-vpn mzp-l-split-reversed mzp-l-split-center-on-sm-md mzp-t-content-xl',
    image=resp_img(
      url='img/products/vpn/landing-refresh/vpn-select-400.png',
      srcset={
        'img/products/vpn/landing-refresh/vpn-select-400.png': '400w',
        'img/products/vpn/landing-refresh/vpn-select-600.png': '600w',
        'img/products/vpn/landing-refresh/vpn-select-800.png': '800w',
      },
      sizes={
        '(min-width: 1312px)': '400px',
        '(min-width: 768px)': '50vw',
        'default': '100vw'
      },
      optional_attributes={
        'height': '396',
        'width': '400',
        'class': 'mzp-c-split-media-asset',
      }
    ),
    media_class='mzp-l-split-h-center',
    media_after=True
  ) %}
    <h2 class="u-title-lg">{{ ftl('vpn-landing-whats-a-vpn') }}</h2>

    <p class="u-body-lg">
      {{ ftl('vpn-landing-a-virtual-private-network-protects') }}
    </p>

    <p class="u-body-lg">
      <a href="{{ url('products.vpn.features') }}">{{ ftl('vpn-landing-see-all-the-ways-mozilla-vpn') }}</a>
    </p>
  {% endcall %}

  {# note: `id=#pricing` is used as an anchor link from android in-product subscription flows, so do not remove (issue 10039) #}
  {% if vpn_available %}
    {% if mobile_sub_only %}
      <div id="pricing">
        {% with heading = ftl('vpn-landing-one-subscription-for-all-your'), campaign = 'vpn-landing-page' %}
          {% include 'products/vpn/includes/mobile-subscribe.html' %}
        {% endwith %}
      </div>
    {% else %}
      <div id="pricing">
        <section class="mzp-l-content mzp-t-content-xl">
          <header class="c-pricing-main-header">
            <h3 class="c-section-title">{{ ftl('vpn-landing-one-subscription-for-all-your') }}</h3>
          </header>
          {% include 'products/vpn/includes/pricing-refresh.html' %}
        </section>
      </div>
    {% endif %}
  {% else %}
    <div id="pricing">
      <section class="mzp-l-content mzp-t-content-xl">
        <header class="c-pricing-main-header">
          <h2 class="c-section-title">{{ ftl('vpn-shared-mozilla-vpn-is-not-yet-available') }}</h2>
          <a class="mzp-c-button mzp-t-product mzp-t-xl" href="{{ url('products.vpn.invite') }}" data-cta-text="Join the VPN Waitlist" data-testid="join-waitlist-not-available-button">
            {{ ftl('vpn-shared-waitlist-link') }}
          </a>
        </header>
      </section>
    </div>
  {% endif %}

  <section class="c-how-vpn-helps mzp-l-content mzp-t-content-xl">
    <h2 class="c-section-title">{{ ftl('vpn-landing-how-a-vpn-helps-you-v2', fallback='vpn-landing-how-a-vpn-helps-you') }}</h2>

    <img class="c-section-main-img" loading="lazy" src="{{ static('img/products/vpn/landing-refresh/travel-padlock.svg') }}" width="726" height="280" alt="">

    <ul class="mzp-l-columns mzp-t-columns-three">
      <li>
        <h3 class="c-reason-title">{{ ftl('vpn-landing-keeps-your-data-safe') }}</h3>
        <p>{{ ftl('vpn-landing-log-in-to-your-bank-or') }}</p>
      </li>
      <li>
        <h3 class="c-reason-title">{{ ftl('vpn-landing-blocks-advertisers-from') }}</h3>
        <p>{{ ftl('vpn-landing-hide-your-activity-from') }}</p>
      </li>
      <li>
        <h3 class="c-reason-title">{{ ftl('vpn-landing-take-control') }}</h3>
        <p>{{ ftl('vpn-landing-customize-your-vpn') }}</p>
      </li>
    </ul>
  </section>

  {{ vpn_conditional_cta_refresh('secondary') }}

  <section class="c-features mzp-l-content mzp-t-content-xl">
    <h2 class="c-section-title t-large">{{ ftl('vpn-landing-features') }}</h2>

    <ul class="mzp-l-columns mzp-t-columns-two mzp-t-picto-side">
      {% call picto(
        image=resp_img(
          url='img/products/vpn/landing-refresh/icons/devices.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '40',
            'loading': 'lazy'
          }
        ),
        body=True,
        base_el='li'
      ) %}
        <p class="c-feature-title">
          {{ ftl('vpn-landing-connect-up-to-devices', devices=connect_devices) }}
        </p>
      {% endcall %}

      {% call picto(
        image=resp_img(
          url='img/products/vpn/landing-refresh/icons/globe.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '40',
            'loading': 'lazy'
          }
        ),
        body=True,
        base_el='li'
      ) %}
        <p class="c-feature-title">
          {{ ftl('vpn-landing-more-than-servers-in-countries', servers=connect_servers, countries=connect_countries) }}
        </p>
      {% endcall %}

      {% call picto(
        image=resp_img(
          url='img/products/vpn/landing-refresh/icons/speed.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '40',
            'loading': 'lazy'
          }
        ),
        body=True,
        base_el='li'
      ) %}
        <p class="c-feature-title">
          {{ ftl('vpn-landing-fast-network-speeds-even-while') }}
        </p>
      {% endcall %}

      {% call picto(
        image=resp_img(
          url='img/products/vpn/landing-refresh/icons/no-spy.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '40',
            'loading': 'lazy'
          }
        ),
        body=True,
        base_el='li'
      ) %}
        <p class="c-feature-title">
          {{ ftl('vpn-landing-no-logging-tracking-or-sharing') }}
        </p>
      {% endcall %}

      {% call picto(
        image=resp_img(
          url='img/products/vpn/landing-refresh/icons/stop.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '40',
            'loading': 'lazy'
          }
        ),
        body=True,
        base_el='li'
      ) %}
        <p class="c-feature-title">
          {{ ftl('vpn-landing-no-bandwidth-restrictions-or') }}
        </p>
      {% endcall %}

      {% call picto(
        image=resp_img(
          url='img/products/vpn/landing-refresh/icons/shield.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '40',
            'loading': 'lazy'
          }
        ),
        body=True,
        base_el='li'
      ) %}
        <p class="c-feature-title">
          {{ ftl('vpn-landing-extra-security-whole-device') }}
        </p>
      {% endcall %}

      {% if ftl_has_messages('vpn-landing-built-transparently') %}
        {% call picto(
          image=resp_img(
            url='img/products/vpn/landing-refresh/icons/open-source.svg',
            optional_attributes={
              'class': 'mzp-c-picto-image',
              'width': '40',
              'loading': 'lazy'
            }
          ),
          body=True,
          base_el='li'
        ) %}
          <p class="c-feature-title">
            {{ ftl('vpn-landing-built-transparently') }}
          </p>
        {% endcall %}
      {% endif %}

      {% if ftl_has_messages('vpn-landing-easy-firefox-integration') %}
        {% call picto(
          image=resp_img(
            url='img/products/vpn/landing-refresh/icons/fx-integration.svg',
            optional_attributes={
              'class': 'mzp-c-picto-image',
              'width': '40',
              'loading': 'lazy'
            }
          ),
          body=True,
          base_el='li'
        ) %}
          <p class="c-feature-title">
            {{ ftl('vpn-landing-easy-firefox-integration') }}
          </p>
        {% endcall %}
      {% endif %}
    </ul>
    <p class="c-section-more"><a href="{{ url('products.vpn.features') }}">{{ ftl('vpn-landing-see-all-features') }}</a></p>
  </section>

  {{ vpn_conditional_cta_refresh('tertiary') }}

  {% call split(
    block_class='c-brand-trust mzp-l-split-center-on-sm-md mzp-t-content-lg',
    image=resp_img(
      'img/products/vpn/landing-refresh/heart.svg',
      optional_attributes={
        'class': 'mzp-c-split-media-asset',
        'loading': 'lazy',
        'width': '260',
        'height': '260',
      }
    ),
    media_class='mzp-l-split-h-center',
    media_after=True
  ) %}
    <h2 class="u-title-lg">{{ ftl('vpn-landing-fram-a-brand-you-can-trust') }}</h2>
    <p>{{ ftl('vpn-landing-mozilla-is-a-non-profit-backed') }}</p>
  {% endcall %}

  {% include 'products/vpn/includes/press.html' %}

  <section class="c-learn-more mzp-l-content mzp-t-content-xl">
    <h2 class="c-section-title t-large">{{ ftl('vpn-landing-learn-more-from-our-experts') }}</h2>

    <ul class="mzp-l-columns mzp-t-columns-three">
      {% call picto(
        image=resp_img(
          url='img/products/vpn/landing-refresh/icons/home.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '104',
            'loading': 'lazy'
          }
        ),
        body=True,
        base_el='li'
      ) %}
        <h3 class="c-learn-more-heading">
          <a href="{{ url('products.vpn.resource-center.article', 'do-you-need-a-vpn-at-home-here-are-5-reasons-you-might') }}">
            {{ ftl('vpn-landing-do-you-need-a-vpn-at-home') }}
          </a>
        </h3>
      {% endcall %}

      {% call picto(
        image=resp_img(
          url='img/products/vpn/landing-refresh/icons/ip.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '104',
            'loading': 'lazy'
          }
        ),
        body=True,
        base_el='li'
      ) %}
        <h3 class="c-learn-more-heading">
          <a href="{{ url('products.vpn.resource-center.article', 'what-is-an-ip-address') }}">
            {{ ftl('vpn-landing-what-is-an-ip-address') }}
          </a>
        </h3>
      {% endcall %}

      {% call picto(
        image=resp_img(
          url='img/products/vpn/landing-refresh/icons/location.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '104',
            'loading': 'lazy'
          }
        ),
        body=True,
        base_el='li'
      ) %}
        <h3 class="c-learn-more-heading">
          <a href="{{ url('products.vpn.resource-center.article', 'how-your-location-is-tracked-and-how-you-can-limit-sharing-it') }}">
            {{ ftl('vpn-landing-how-your-location-is-tracked') }}
          </a>
        </h3>
      {% endcall %}
    </ul>

    <p class="c-section-more"><a href="{{ url('products.vpn.resource-center.landing') }}">{{ ftl('vpn-landing-see-more-resources') }}</a></p>
  </section>

  {{ vpn_conditional_cta_refresh('footer') }}

  <footer class="c-footer-legal mzp-l-content mzp-t-content-xl">
    {% include 'products/vpn/includes/footer-legal.html' %}
  </footer>
</main>
{% endblock %}

{% block js %}
  {{ js_bundle('fxa_product_button') }}
  {{ js_bundle('data_begincheckout') }}
{% endblock %}
